<template>
  <div class="page msg-list" :class="{'grey-stage': this.catId}" :style="{'min-height': winHeight + 'px'}">
    <div class="container scroll-container" :style="{'height': winHeight + 'px'}">
      <div v-if="show"
        v-infinite-scroll="loadMsgs"
        :infinite-scroll-disabled="loading"
        infinite-scroll-distance="30">
          <div class="rela-tip-main">
            <div class="rela-result-tip top-list-counter">总计{{ total }}条记录</div>
          </div>
          <div class="no-data-tip" v-if="!list.length && init">暂无通知</div>
          <div class="msg-list-box" v-if="!this.catId">
            <div class="msg-item" v-for="(item, key) in list" @click="jumpTo(item)">
                <div class="msg-left">
                  <span class="msg-avatar">
                    <img :src="item.msg_title_img" />
                  </span>
                </div>
                <div class="msg-right">
                  <div class="msg-info-block">
                    <div class="msg-info-left">
                      <div class="info-left-block">
                        <div class="msg-info-head">{{ item.msg_title }}</div>
                        <div class="msg-info-body" v-html="item.msg_content"></div>
                        <div class="msg-info-bottom">{{ item.insert_time }}
                        </div>
                      </div>
                    </div>
                    <div class="msg-info-right radius" v-if="item.msg_type_id">
                      <span class="msg-cat-ico" v-if="item.msg_count > 0">{{ item.msg_count }}</span>
                    </div>
                    <div class="msg-info-right radius"  v-if="!item.msg_type_id">
                      <span class="msg-cat-ico point" v-if="item.msg_count > 0"></span>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="cat-msg-list-box" v-if="this.catId">
            <div class="cat-msg-item" v-for="(item, key) in list" >
              <h3 class="cat-info-title">{{ item.msg_title }}</h3>
              <div class="cat-info-body" v-html="item.msg_content"></div>
              <div class="cat-info-bottom" @click="jumpTo(item)">详情
                <div class="msg-cont">
                  <span class="msg-link-ico"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="center-content-block load-more"
            @click="loadMsgs()"
            v-if="hasMoreData !== false && loading !== true">
            <span>点击加载</span>
          </div>
          <div class="no-data-tip" v-if="loading === true && hasMoreData === true" >
            <span>加载数据中...</span>
          </div>
      </div>
      <crm-tabbar activeItem='smart-assister'></crm-tabbar>
      <x-dialog v-model="this.$store.state.app.dialogShow" >
            <div class="dialog-message">
                {{ this.$store.state.app.dialogMessage }}
            </div>
            <span class="vux-close" @click="hideDialog">知道了</span>
      </x-dialog>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'
  import crmTabbar from '../components/crm-tabbar'
  import {showDialog, hideDialog} from '../lib/dialog'
  import XDialog from 'vux/src/components/x-dialog'

  export default {
    mounted () {
      this.catId = this.$route.query.cat_id
      this.callJsApi('biz.navigation.setTitle', { title: '智能助手' })
    },
    components: {
      crmTabbar,
      XDialog
    },
    methods: {
      loadMsgs () {
        if (this.hasMoreData === false) {
            this.loading = true
            return
        }

        const catId = this.$route.query.cat_id
        let promise
        if (this.loading === true) return

        if (catId) promise = this.getCatMsgList({cat_id: catId, page_index: this.page_index, page_size: this.page_size})
        else promise = this.getMsgList({page_index: this.page_index, page_size: this.page_size})
        this.loading = true
        this.init = false

        promise.then((response) => {
          this.init = true
          if (response.data.errcode === 0) {
            this.page_index++
            const totalPage = Math.ceil(parseInt(response.data.total) / parseInt(this.page_size))
            this.hasMoreData = this.page_index < totalPage
            console.log(this.page_index < totalPage, this.page_index, totalPage)
            this.list = this.list.concat(response.data.results)
            this.total = response.data.total
          } else {
            this.hasMoreData = false
          }
          this.loading = false
        }).catch((e) => {
          this.init = true
          this.hasMoreData = false
          this.loading = false
          console.log(e)
        })
      },
      reset () {
        this.hasMoreData = true
        this.loading = false
        this.list = []
        this.show = false
        this.total = 0
        this.page_index = 1
        this.false = true
        this.catId = this.$route.query.cat_id
        if (this.catId) {
          this.callJsApi('biz.navigation.setTitle', { title: '通知' })
        } else {
          this.callJsApi('biz.navigation.setTitle', { title: '智能助手' })
        }
        setTimeout(() => {
          this.show = true
        })
      },
      jumpTo (msg) {
          if (! this.catId) {
              if (msg.msg_biz_keyword === 'GJT' && msg.suidFollowing === '0') {
                  showDialog('该名单已不属于你!')
                  return
              }
          } else {
              if (msg.suidFollowing === '0') {
                  showDialog('该名单已不属于你!')
                  return
              }
          }
        this.changeReadStatus({
          cat_id: msg.id,
          read_status: encodeURIComponent('YD#')
        })
        if (msg.link_type === 'WL#') {
          window.location.href = msg.msg_url
        } else {
          this.reset()
          this.$router.push({path: msg.msg_url})
        }
      },
      hideDialog: hideDialog,
      ...mapActions({
        'getMsgList': 'getMsgList',
        'getCatMsgList': 'getCatMsgList',
        'changeReadStatus': 'changeReadStatus'
      })
    },
    activated () {
    },
    computed: {
      ...mapState({
        fullPath: state => state.route.fullPath
      })
    },
    watch: {
      fullPath () {
        this.reset()
      }
    },
    data () {
      return {
        catId: '',
        page_index: 1,
        init: false,
        page_size: 30,
        loading: false,
        show: true,
        hasMoreData: true,
        list: [],
        total: 0,
        winHeight: window.innerHeight - 52
      }
    }
  }
</script>
<style lang="less">
  @import "../less/base";
  .msg-list {
    overflow: hidden;

    .grey {
      color: #999999;
    }

    .msg-link-ico {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      top: -2px;
      position: absolute;
      top: 50%;
      margin-top: -4px;
      right: 10px;
    }

    @msg-radius-size: 12px;
    @padding: 3px;

    .msg-cat-ico {
      display: inline-block;
      height: @msg-radius-size;
      width: @msg-radius-size;
      border-radius: 50%;
      color: #fff;
      // border:1px solid #35adff;
      // border-color: #C8C8CD;
      background-color: red;
      position: absolute;
      top: 50%;
      text-align: center;
      line-height: @msg-radius-size;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      padding: @padding;
      margin-top: -(@msg-radius-size / 2);
      margin-right: -(@msg-radius-size / 2);
      right: 50%;
      // right: 2px;
      font-weight: bolder;

      &.point {
        width: 4px;
        height: 4px;
      }
    }



    .msg-item {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #f3f0f0;
      padding: 10px 5px 10px 4px;
      border-radius: 2px;
      cursor: pointer;
    }

    .msg-item:first-child {
      // border-top: 1px solid #f3f0f0;
    }

    .msg-item:last-child {
      border: none;
    }

    .cat-msg-list-box {
      padding: 10px;
    }

    .cat-msg-item {
      border: 1px solid #f3f0f0;
      margin-bottom: 10px;
      padding: 10px 8px 0 12px;
      border-radius: 10px;
      background-color: white;
    }

    .cat-info-bottom {
      border-top: 1px solid #f3f0f0;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .cat-info-title {
      font-size: 16px;
      color: 444;
    }

    .msg-cont {
      width: 16px;
      height: 16px;
      float: right;
      position: relative;

      .msg-link-ico {
        right: 0;
      }
    }

    .cat-info-body {
      padding-top: 8px;
      padding-bottom: 8px;
      min-height: 80px;
    }
    .cat-info-body,.cat-info-bottom {
      color: #999;
      font-size: 12px;
    }

    .msg-info-body, .msg-info-bottom {
      color: #999999;
    }

    .msg-info-body {
      padding-bottom: 4px;
      font-size: 13px;
    }

    .msg-left {
      display: flex;
      flex: initial;
      padding-right: 10px;
      align-items: center;
    }

    .msg-list-box {
        padding: 0 0 0 20px;
    }

    .msg-info-block {
      display: flex;
    }

    .msg-info-left {
      flex: 1;
    }

    .msg-info-right {
      flex: initial;
      position: relative;

      &.radius {
        width: 36px;
      }

      &.width-10 {
        width: 30px;
      }
    }

    .msg-right {
      flex: 1;
    }

    .msg-info-bottom {
      position: relative;
      font-size: 12px;
    }

    .read-status {
      position: absolute;
      right: 0;
      color: #f43530;
    }

    .msg-avatar {
      width: 30px;
      height: 30px;
      display: flex;
      flex: 1;
      border-radius: 50%;
      // overflow: hidden;

      img {
        width: 100%;
        // height: 100%;
      }
    }

    .load-more {
      color: #35adff;
      cursor: pointer;
    }
  }
</style>
